<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- {{插值语法}} 插值语法中使用数据,会去vue实例上去查询当前数据的值 -->

  <div>
    <p id="app">
      {{msg}}
    </p>
    <p id="one">
      {{msg}}
    </p>
    <p id="two">{{msg}}</p>
  </div>

  <script>
    // 阻止提示
    Vue.config.productionTip = false
    // Vue实例
    // one
    // const vm = new Vue({
    //   el: "#app"//el代表的是容器  选择器 
    //   // 存放数据 model层
    //   , data: {
    //     msg: 'hello Vue!!!'
    //   }
    // })
    // two Writing method
    const vm = new Vue({
      data: {
        msg: 'hello World'
      }
    })
    vm.$mount('#app')
    // 另一种写法
    new Vue({
      data: {
        msg: 'hello Vue'
      }
    }).$mount('#one')

    new Vue({
      data: {
        msg: "你好呀 Vue"
      }
    }).$mount('#two')
    // console.log(new Vue());
    // 元素节点
    console.log(vm.$el);
  </script>
</body>

</html>